<template>
    <div class="tree-component">
        <div class="tree-header">
            <h3 class="tree-title">合肥市</h3>
        </div>
        <div class="tree-container">
            <el-tree ref="treeRef" :data="treeData" :props="{ children: 'children', label: 'label' }"
                :show-checkbox="false" :check-strictly="false" :default-expand-all="true" :expand-on-click-node="true"
                :highlight-current="true" node-key="id" class="custom-tree" @node-click="handleNodeClick"
                @check-change="handleCheckChange">
                <template #default="{ node }">
                    <div class="tree-node">

                        <span class="node-label">{{ node.label }}</span>
                    </div>
                </template>
            </el-tree>
        </div>
    </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['node-click', 'check-change'])
const treeRef = ref()
const treeData = ref([
    {
        id: 2,
        label: '瑶海区',
        children: [
            { id: 3, label: '大兴镇' },
            { id: 4, label: '龙岗开发区' }
        ]
    },
    {
        id: 5,
        label: '庐阳区',
        children: [
            { id: 6, label: '三十岗乡' },
            { id: 7, label: '大杨镇' }
        ]
    },
    {
        id: 8,
        label: '蜀山区',
        children: [
            { id: 9, label: '南岗镇' },
            { id: 10, label: '井岗镇' }
        ]
    },
    {
        id: 11,
        label: '包河区',
        children: [
            { id: 12, label: '大圩镇' },
            { id: 13, label: '烟墩街道' }
        ]
    }
])

// 节点点击事件
const handleNodeClick = (data, node) => {
    emit('node-click', data, node)
}

// 复选框状态改变事件
const handleCheckChange = (data, checked, indeterminate) => {
    emit('check-change', data, checked, indeterminate)
}

// 暴露方法给父组件
defineExpose({
    getCheckedNodes: () => treeRef.value?.getCheckedNodes(),
    getCheckedKeys: () => treeRef.value?.getCheckedKeys(),
    setCheckedKeys: (keys) => treeRef.value?.setCheckedKeys(keys),
    setCurrentKey: (key) => treeRef.value?.setCurrentKey(key)
})
</script>

<style scoped lang="scss">
.tree-component {
    width: 100%;
    height: 100%;
    overflow: auto;
    cursor: pointer;
    // 禁止穿透
    .tree-title {
        font-weight: 400;
        font-size: 18px;
        color: #2E3238;
        margin-left: 6px;
    }
    .custom-tree {
        background: transparent;
        margin-top: 5px;
        :deep(.el-tree-node) {
            margin-bottom: 4px;
            .el-tree-node__content {
                height: 36px;
                border-radius: 8px;
                margin-bottom: 2px;
                font-size: 18px;
                color: #2E3238;
                &:hover {
                    .tree-node {
                        .node-label {
                            color: #1872F9;
                        }
                    }
                }
            }
        }
    }
}
</style>
